<template>
    <div class="listDiv">
        <div class="searchDiv">
            <el-select v-model="obj.req.state" placeholder="申请状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.applyTypeAry" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-input clearable placeholder="匹配机构名称" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
        </div>
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="mw300">名称</li>
                <li class="mw300">地址</li>
                <li class="mw150">联系人</li>
                <li class="wcen">联系电话</li>
                <li class="wcen">状态</li>
                <li class="mw190 wcen">申请时间</li>
                <li class="">审核人</li>
                <li class="wcen">操作</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="mw300">
                        <el-tooltip class="box-item" effect="dark" :content="x.name" placement="top-start" :disabled="x.name.length<17">
                            <div class="lineOne pointer">{{x.name}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mw300">
                        <el-tooltip class="box-item" effect="dark" :content="x.address" placement="top-start" :disabled="x.address.length<17">
                            <div class="lineOne pointer">{{x.address}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mw150">{{x.concat}}</li>
                    <li class="wcen">{{x.mobile}}</li>
                    <li class="wcen"><div :class="[proxy.$utils.findObj(x.state,globalData.applyTypeAry,'value').label]">{{proxy.$utils.find(globalData.applyTypeAry, x.state)}}</div></li>
                    <li class="mw190 wcen">{{x.intime}}</li>
                    <li class="">{{x.memo}}</li>
                    <li class="wcen">
                        <DelConfirm class="" isclass="edit_btn" :disabled="x.state!=0" buttontype="success" isSlot @yesClick="del(x,1)" @noClick="del(x,2)" title="确认要审核通过吗？" text="审核" yes="通过" no="拒绝">
                        <template v-slot:slot_1>
                                <div>
                                    <div class="mb5">请选择截止时间：</div>
                                    <DatePicker v-model:value="obj.applyendtime" />
                                </div>
                            </template>
                        </DelConfirm>
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />
    </div>

</template>

<script setup>
    import { reactive,getCurrentInstance, ref,computed, toRefs,provide } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    import DatePicker from '@/components/date_picker.vue'
    import { ElMessageBox } from 'element-plus'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        ary:[],
        req:{
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
            state: ""
        },
        popovervisibles: {},
        applyendtime: '',

    })

    let init = () => {
        proxy.$ajax({
            url: '/docking/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
                obj.ary.value.map(e=>{
                    obj.popovervisibles[`visible${e.apply_id}`] = false
                })
            }
        }).catch(() => { })
    }
    const show = (row)=>{
        celsign()
        obj.popovervisibles[`visible${row.apply_id}`] = true
    }
    const celsign = ()=>{
        for (const key in obj.popovervisibles) {
            if (Object.hasOwnProperty.call(obj.popovervisibles, key)) {
                obj.popovervisibles[key] = false  
            }
        }
    }

    
    let del = (x,v) => {
        console.log(v);
        if(v==2){
            ElMessageBox.prompt('拒绝原因', '拒绝', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                inputPlaceholder: '请输入审核原因',
                inputErrorMessage: 'Invalid Email',
            }).then(({ value }) => {
                examineverify(x.apply_id, v, value, '2000-01-01')
            }).catch(() => {})
        }else{
            if(!obj.applyendtime){
                proxy.elMessageMixin('请选择截止时间', 'error')
                return
            }
            examineverify(x.apply_id, v, '', obj.applyendtime)
        }
    }

    const examineverify = (id, v, refuse, applyendtime)=>{
        // return
        proxy.$ajax({
            url: '/docking/design',
            data: { apply_id: id , state: v,memo:refuse||'', endtime:applyendtime},
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                proxy.elMessageMixin("审核成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { width:100px!important; }
    #tb ul .li1 { width: 220px; }
    #tb ul .li2 { width: 80px; }
    #tb ul .li3 { width: 60px; }
    #tb ul .li4 { width: 70px; }
</style>